import React, { memo } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { Card, Image, Radio } from '@arco-design/web-react';
export default memo(function BannerStyle() {
  const dispatch = useDispatch()
  const srcList = [
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
    '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/e278888093bef8910e829486fb45dd69.png~tplv-uwbnlip3yd-webp.webp',
  ];
  const RadioGroup = Radio.Group;
  const bannerStyle = useSelector(state => state.bannerStyle)
  const onChange = e => {
    dispatch({
      type:'bannerStyle',
      data:e
    })
  };
  return (
    <Card title='banner-style'>
      <Image.PreviewGroup infinite>
      <RadioGroup defaultValue={bannerStyle} onChange={e => { onChange(e) }}>
        <Radio value={false}>Square</Radio>
        <br/>
        <Image src={srcList[0]} width={100} />
        <br/>
        <br/>
        <Radio value={true}>Circular</Radio>
        <br/>
        <Image src={srcList[0]} width={100} style={{ borderRadius: '50%' }} />
      </RadioGroup>
      </Image.PreviewGroup>
    </Card>
  );
});
